$(function () {
  var data = {};
  $("#btn").click(function () {
    const uname = $("#uname").val();
    const car_num = $("#car_num").val();
    const vin = $("#vin").val();
    const tel = $("#tel").val();
    data["uname"] = uname;
    data["car_num"] = car_num;
    data["vin"] = vin;
    data["tel"] = tel;
    // console.log(data);
    loadList(data);
  });
  $('#uname').keyup(function (e) {
    if (e.keyCode == 13) {
      $('#btn').click()
    }
  })
  $('#car_num').keyup(function (e) {
    if (e.keyCode == 13) {
      $('#btn').click()
    }
  })
  $('#vin').keyup(function (e) {
    if (e.keyCode == 13) {
      $('#btn').click()
    }
  })
  $('#tel').keyup(function (e) {
    if (e.keyCode == 13) {
      $('#btn').click()
    }
  })
});

function loadList($data = {}) {
  var url = `http://127.0.0.1:3000/customer/search?cname=${$data.uname}&car_num=${$data.car_num}&car_vin=${$data.vin}&tel=${$data.tel}`;
  console.log(url);
  $.get(url, function (res) {
    // console.log(res);
    if (res.code == 200) {
      var list = res.data;
      $(".list").html(
        list.map((elem) => {
          return `<tr>
              <td>${elem.cid}</td>
              <td>${elem.car_num}</td>
              <td>${elem.car_vin}</td>
              <td>${elem.cname}</td>
              <td>${elem.tel}</td>
              <td>${elem.address}</td>
              <td>${moment(elem.createtime).format('YYYY/MM/DD HH:mm:ss')}</td>
              <td><button class="update" onclick='changeMess(this)'>修改</button></td>
              <td><button class="delete" onclick='deleteBtn(this)'>删除</button></td>
              </tr>`;
        })
      );
    } else {
      $(".list").html("找不到对应的客户信息");
    }
  });
}
window.onload = loadList({ uname: "", car_num: "", vin: "", tel: "" });
/* $('input').focus(function () {
  $(this).siblings().val('')
}) */

//  删除按钮点击事件
function deleteBtn(element) {
  //  获取到点击的这个删除按钮
  var deleteIndex = element.parentNode.parentNode;
  // console.log(deleteIndex);
  //  弹窗提示是否确认操作
  if (confirm('是否确认操作')) {
    //  tbody的孩子tr的第一个子元素 也就是第一个td的值 是需要提取出来的 这个是数据库里的cid
    var cid = deleteIndex.childNodes[1].innerHTML
    // console.log(cid);
    var url = `http://127.0.0.1:3000/customer/delete`
    //  利用post传输数据的方式进行删除操作
    $.post(url, { cid }, data => {
      //  通过判断data的返回值来确认是否删除成功
      if (data.code == 200) {
        console.log('删除成功');
        //  删除成功后，调用查询按钮，实现页面刷新
        $('#btn').click()
      } else {
        console.log('删除失败');
      }
    })
  }
}
//  修改按钮的点击事件
function changeMess(element) {
  //  声明一个变量 保存点击的这个修改按钮所在的父元素的父元素 也就是button的父元素td的父元素tr
  var $tr = element.parentNode.parentNode;
  console.log($tr);
  //  声明一个变量 保存当前tr所有的子元素td
  var $tdAll = $tr.children
  console.log($tdAll);
  //  开始for循环,因为序号是自增的，我希望的是不修改数据库里cid的编号，所以从1开始循环,最后3个td，一个是删除按钮，一个是修改按钮，一个是创建时间，这三个也是不希望被修改的，所以td.length-3
  for (var i = 1; i < $tdAll.length - 3; i++) {
    //  声明一个变量 保存所有td的值
    var text = $tdAll[i].firstChild;
    //  打桩测试 看能不能获取到td的值
    console.log(text);
    //  创建一个输入框元素
    var $textArea = document.createElement('textarea');
    //  将td的值赋值给textarea
    $textArea.value = text.nodeValue
    //  将所有的td的子节点替换为textarea,replaceChild(参数1:你要插入的节点对象,参数2:你要移除的节点对象)
    $tdAll[i].replaceChild($textArea, text)
  }
  //  循环结束后将被点击的这个button按钮替换成另一个button按钮 ，替换的这个按钮绑定了提交事件
  element.parentNode.innerHTML = `<button class="change" onclick='updateMess(this)'>确认</button>`
  // console.log(element.parentNode);
}
//  替换后的button的点击事件,
//  思路:
//  1.先获取每一个textarea框的值
//  2.将textarea的值包装成一个对象，通过post传参把修改后的值传递给后端，进行数据库的数据修改.
function updateMess(element) {
  //  打桩测试获取textarea的值
  // console.log($('textarea').val());
  // console.log($('textarea'));
  //  获取的是表中cid字段的值
  var cid = (element.parentNode.parentNode.childNodes[1].innerHTML) * 1
  //  获取了这个更新button的父元素td的父元素tr
  var $tr = element.parentNode.parentNode;
  //  获取这一行tr的每个td
  var $tdAll = $tr.children
  //  打桩测试看是否获取到了每个td
  // console.log($tdAll);
  //  第一个是表中的cid，不想让这个字段被修改，所以从1开始循环，后面的创建时间和2个按钮也不被获取
  for (var i = 1, params = {}; i < $tdAll.length - 3; i++) {
    //  获取了每个td下textarea的值
    var text = $tdAll[i].querySelector('textarea').value
    // console.log(text);
    //  将值保存到对象中
    params[i] = text
    // console.log('params:',params);
  }
  console.log(cid, typeof cid);
  console.log(params);
  var car_num = params[1]
  var car_vin = params[2]
  var cname = params[3]
  var tel = params[4]
  var address = params[5]
  //  将要传输的值包装到一个对象中
  var str = { car_num, car_vin, cname, tel, address, cid }
  //  打桩测试看传输的这个对象
  console.log(str);
  var url = 'http://127.0.0.1:3000/customer/update'
  //  jqueryPost传输方式
  $.post(url, str, data => {
    if (data.code == 200) {
      alert('客户信息修改成功')
      $('#btn').click()
    } else {
      alert('客户信息修改失败')
    }
  })
}
